/*
 * @Author: rileycai
 * @Date: 2022-03-14 14:21:26
 * @LastEditTime: 2022-03-14 15:23:04
 * @LastEditors: rileycai
 * @Description: webp-image组件对t-image包裹了一层，主要实现图片裁剪、webp压缩功能
 * @FilePath: /tdesign-miniprogram-starter/components/webp-image/index.js
 */
const systemInfo = wx.getSystemInfoSync();
Component({
	externalClasses: ['t-class', 't-class-load'],
	properties: {
		loadFailed: {
			type: String,
			value: 'default',
		},
		loading: {
			type: String,
			value: 'default',
		},
		src: {
			type: String,
			value: '',
		},
		mode: {
			type: String,
			value: 'aspectFill',
		},
		webp: {
			type: Boolean,
			value: true,
		},
		lazyLoad: {
			type: Boolean,
			value: false,
		},
		showMenuByLongpress: {
			type: Boolean,
			value: false,
		},
	},
	data: {
		thumbHeight: 375,
		thumbWidth: 375,
		systemInfo,
	},
	lifetimes: {
		ready() {
			const {
				mode
			} = this.properties;
			// 获取容器的真实宽高，设置图片的裁剪宽度
			this.getRect('.J-image').then((res) => {
				if (res) {
					const {
						width,
						height
					} = res;
					this.setData(
						mode === 'heightFix' ? {
							thumbHeight: this.px2rpx(height) || 375,
						} : {
							thumbWidth: this.px2rpx(width) || 375,
						},
					);
				}
			});
		},
	},
	methods: {
		px2rpx(px) {
			return (750 / (systemInfo.screenWidth || 375)) * px;
		},
		getRect(selector) {
			return new Promise((resolve) => {
				if (!this.selectorQuery) {
					this.selectorQuery = this.createSelectorQuery();
				}
				this.selectorQuery.select(selector).boundingClientRect(resolve).exec();
			});
		},
		onLoad(e) {
			this.triggerEvent('load', e.detail);
		},
		onError(e) {
			this.triggerEvent('error', e.detail);
		},
	},
});